<template>
  <div>
    <Breadcrumb :style="{margin: '16px 0'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem to="/role">角色管理</BreadcrumbItem>
      <BreadcrumbItem>角色列表</BreadcrumbItem>
    </Breadcrumb>
    <Card>
      <div style="min-height: 600px">
        <Button type="primary" size="large" style="margin-bottom: 15px;" to="/role/add">添加角色</Button>
        <Table :columns="columns" :data="rolesData"></Table>
        <div style="margin-top:20px;">
          <Page :total="total" placement="top" show-sizer @on-page-size-change="pageSizeChange" @on-change="pageChange" />
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    return {
      pagesize: 10,
      pageno: 1,
      total: 0,
      rolesData: [],
      columns: [
        {
          title: '#',
          type: 'index'
        }, {
          title: '角色名称',
          key: 'roleName'
        }, {
          title: '权限',
          key: 'permNames'
        }, {
          title: '操作',
          render: (h, param) => {
            return h('Button', {
              props: {
                type: 'primary'
              },
              on: {
                click: () => {
                  // this.editRoleModal = true
                  // this.modalData = param.row
                  // console.log(param.row)
                  let urldata = {
                    id: param.row.id,
                    name: param.row.roleName,
                    perm: param.row.permNames
                  }
                  this.$router.push('/role/edit?' + qs.stringify(urldata))
                }
              }
            }, '编辑')
          }
        }
      ]
    }
  },
  methods: {
    pageSizeChange(n) {
      this.pageSize = n
      this.pageno = 1
      this.$options.methods.getList(this)
    },
    pageChange(n) {
      this.pageno = n
      this.$options.methods.getList(this)
    },
    getList(_this) {
      let url = '/bm/opera/role/findRolePageList?pageNo=' + _this.pageno + '&pageSize=' + _this.pagesize
      _this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          _this.$Message.success('列表获取成功')
          _this.rolesData = res.data.detail.list
          _this.pageSize = res.data.detail.pageSize
          _this.pageNo = res.data.detail.pageNum
          _this.total = res.data.detail.total
        }
      }).catch(err => {
        _this.$Message.error('网络错误，请稍后重试')
      })
    },
    handleTransferUser() {
      console.log(this.auths)
      // this.$axios.post('/bm/opera/role/updateRole', qs.stringify({
      //   roleName: this.modalData.roleName,
      //   roleId: this.modalData.id
      // })).then(res => {
      //   if (res.data.code == 200) {

      //   }
      // })
    }
  },
  mounted() {
    this.$options.methods.getList(this)
  }
}
</script>
